﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="map.aspx.cs" Inherits="Itop.GpsCar.Web.MainMap.map" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">

<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
    <style type="text/css">
    html, body, form
     {
       height: 100%;
       margin: 0px;
       padding: 0px;
       overflow: hidden;
     }
    </style>
</head>
<body onload="init();">
    <form id="form1" runat="server">
    <div style="width:100%;height:100%;border:1px solid gray" id="map" >
    
    </div>
    </form>
</body>
</html>


<script type="text/javascript">
     var map;
     var marker;
     var infowindow;
     var geocoder;
     var myLatlng ;
     var mypoin ;
     var marker ;
     var myOptions;
     var LatLngStr = [] ;
     var markersArray = [];
              geocoder = new google.maps.Geocoder();
              myLatlng = new google.maps.LatLng(31.3, 117.2);
              myOptions = {
                  zoom: 3,
                  center: myLatlng,
                  panControl: true, 
                  navigationControl: true,
                  scaleControl: true,
                  streetViewControl: true,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              }
              map = new google.maps.Map(document.getElementById("map"), myOptions);
          function init() {

           <% for (int i = 0; i < marlist.Count; i++)
          {%>
           AddMark(<%=marlist[i].x%>,<% =marlist[i].y%>,'<%= marlist[i].pl %>',<%=marlist[i].speed %>,'<%= marlist[i].strTime %>');
          <% }%>
         <% for (int j = 0; j < pointlist.Count; j++)
          {%>
          AddPoint(<%=pointlist[j].x%>,<% =pointlist[j].y%>);
          <% }%>       
           <%if(DrawLine)
           {%>
          var LatLngLine = new google.maps.Polyline({
                path: LatLngStr,
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 3
            });
            LatLngLine.setMap(map); //画线
            map.setCenter(LatLngStr[0]);
        <% }%>
          }
         function AddPoint(wd, jd) {
                  mypoin = new google.maps.LatLng(wd, jd);
                  LatLngStr.push(mypoin);
              };
          function AddMark(wd, jd,pl,sp,t) {
                  myLatlng = new google.maps.LatLng(wd, jd);
                  markersArray.push(myLatlng);
                  marker = new google.maps.Marker({
                  position: myLatlng,
                  map: map,
                  icon: '../resources/images/car2.png'   //自定义标记图标
              });
             var infowindow = new google.maps.InfoWindow({           //InfoWindow 内容提示  
                content: '<p> '+pl + '</p><p>速度：'+sp+'</p><p>定位:'+t+'</p><p><a href="#">跟踪</a> <a href="#">回放</a> <a href="#">关闭</a> </p>',
                position: myLatlng 
            });
//            infowindow.open(map);   //显示提示主窗口  
            //给marker添加点击事件  
             google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map); //如果提示窗口关闭了，点击标记图标可再次显示提示主窗口
            });
            map.setCenter(myLatlng);
          }      
           
</script>